<template>
	<view>
		<view class="winnercontant">
			<view class="winner-title">
				<!--未中奖-->
				<view v-if="winlottery.winuser.selfWin.level==99" class="textinfo">
					<text style="font-size: 48rpx;">很遗憾，这次没中奖</text>
					<text style="color: #666666;">不过我们为你准备了一点小礼物~</text>
				</view>
				<!--已中奖-->
				<view v-else class="textinfo">
					<text style="font-size: 48rpx;">恭喜，你中奖啦！</text>
					<text>{{prizetitles[winlottery.winuser.selfWin.level]}}等奖：{{winlottery.prizeimgarr[winlottery.winuser.selfWin.level].title}}</text>
					<text style="color: #666666;">请中奖者及时领取奖品，避免过期不能领取~</text>
				</view>
			</view>


			<!--未中奖领取金币-->
			<view @click="tofinish" class="receivegold" v-if="winlottery.winuser.selfWin.level==99">
				<image src="/static/image/big-gold.png" mode="aspectFit"></image>
				<text>金币+{{winlottery.winuser.selfWin.money}}</text>
				<view :class="[recives?'alreadyreceivegold-botton':'receivegold-botton']">{{recives?'已领取':'立即领取'}}</view>
			</view>

			<!--已中奖领取奖品-->
			<view class="receive" v-else @click="tofinish">
				<image :src="iconinfo" mode="aspectFit"></image>
				<text>{{winusertip}}</text>
				<view :class="[ishowanimate?'receive-botton':'alreadyreceivegold-botton']">{{buttoninfo}}</view>
			</view>



			<view class="dryingsheet" v-if="sheetorder">
				<text>收到奖品后，记得晒单领红包哦~</text>
				<navigator :url='"/pages/square/dryingsheet?id="+dreawid' class="dryinfo">
					<text>立即晒单</text>
					<text class="iconfont">&#xe616;</text>
				</navigator>
			</view>

			<!--更多精选抽奖-->
			<view class="choice">
				<view class="choice-title">更多精选抽奖</view>
				<view class="choice-item" v-for="(item,index) in winlottery.winuser.moreLottery">
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="choice-text">
						<view class="choice-item-title">奖品：{{item.pTitle}}x{{item.pCount}}份</view>
						<view style="font-size: 22rpx;margin: 5rpx 0;">{{item.draw_type}}</view>
						<navigator :url="'/pages/lottery/lottery?id='+item.id" class="canyuhuodong">立即参与 ›</navigator>
					</view>
				</view>
			</view>

			<!--中奖名单-->
			<view class="winelist">
				<view class="wine-title">
					<view class="wine-line"></view>
					<view class="wine-text">中奖名单</view>
				</view> 

				<view class="winprize" v-for="(item,index) in winlottery.prizeimgarr">
					<view class="winprize-title">{{prizetitles[index]}}等奖：{{item.title}}</view>
					<view class="winprize-people">
						<!--自己中奖所在的位置index表示奖品的位置-->
						<view class="people-item" v-if="winlottery.winuser.selfWin.level  == index">
							<image :src="winlottery.winuser.selfWin.avatar" mode="aspectFill"></image>
							<view class="avatartext">{{winlottery.winuser.selfWin.nickname}}</view>
							<view v-if="winlottery.type=='red_envelope'" class="lotty-money">
								¥ {{winlottery.winuser.selfWin.money}}
							</view>
						</view>
						<view class="people-item" v-for="(winitem,winindex) in winlottery.winuser.winList[index]" :key="winindex">
							<image :src="winitem.avatar" mode="aspectFill"></image>
							<view class="avatartext">{{winitem.nickname}}</view>
							<view v-if="winlottery.type=='red_envelope'" class="lotty-money">
								¥ {{winitem.money}}
							</view>
						</view>
					</view>
					<navigator v-if="winlottery.winuser.winListCount[index]>9" :url="'/pages/lottery/winsmore?drawtitle='+item.title+'&dreawid='+dreawid+'&level='+index"
					 class="winpirze-more">查看全部中奖名单 ›</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 中奖用户插件
	 */
	export default {
		props: {
			//抽奖ID
			dreawid: {
				type: [Number, String],
				default: 0,
			},
			winlottery: {
				type: Object,
				default: {},
			},
			isredbag: {
				type: Boolean,
				default: false
			},
			prizetitles: {
				type: Array,
				default () {
					return ['一', '二', '三', '四', '五']
				}
			},
			//收货地址id
			shippingid: {
				type: [String, Number],
				default: 1,
			},
		},
		data() {
			return {
				iconinfo: "/static/image/big-gold.png", //出现的图标
				winusertip: '恭喜您获得大量金币', //中奖者小提示
				buttoninfo: '去添加', //按钮提示
				sheetorder: false, //是否显示需要开启晒得通道
				ishowanimate: true, //是否显示动画
				recives:false,//false未领取金币
			}
		},
		
		computed: {
			addrluck(){
				return this.$common.state.addreluckid 
			},
			//是否已评价
			userevaluate(){
				return this.$common.state.evaluate
			}
		},
		watch: {
			//处理已填写地址按钮
			addrluck(value){
				//是否为当前抽奖id
				if(value==this.dreawid){
					this.$set(this.winlottery.winuser.selfWin,'status',2);
					this.buttoninfo = '查看收货地址' 
					this.ishowanimate = false;
				}
			},
			userevaluate(value){
				//关闭晒单
				this.sheetorder = value;
			}
		},
		mounted() {
			//页面渲染后，修改提示内容
			this.changewininfo();
		},
		methods: {
			//中奖后开启晒单 
			sheetinfo() { 
				if (!this.winlottery.winuser.selfWin.mascot && this.winlottery.winuser.selfWin.level !=99) {
					this.sheetorder = true;
				}
			},
			changewininfo() {
				//是否需要显示动画 全局动画结束时代表用户已经操作
				if (this.winlottery.winuser.selfWin.status > 1 ) {
					this.recives = true;
					this.ishowanimate = false;
				}
				//"status": "4", // 状态:1.未领取,2.已领取,3.过期,4.已评价
				//"type":'' 1,2,3 领商品 领优惠券 领取红包
				if (this.winlottery.winuser.selfWin.level != 99) {
					if (this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser.selfWin.grant == 'address') {
						this.iconinfo = '/static/image/address.png' //出现地址图标
						this.winusertip = '中奖者填写收货地址';
						this.buttoninfo = '去填写地址';
					} else if (this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser.selfWin.grant == 'contact_me') {
						this.iconinfo = '/static/image/wechat.png' //出现加好友图标
						this.winusertip = '中奖者添加微信或二维码兑换'
						this.buttoninfo = '联系发起人'
					}

					if (this.winlottery.winuser.selfWin.type == 2) {
						this.iconinfo = '/static/image/coupon.png' //出现领优惠券图标
						this.winusertip = this.winlottery.prizeimgarr[this.winlottery.winuser.selfWin.level].title
						this.buttoninfo = '立即领取'
					}
					if (this.winlottery.winuser.selfWin.type == 3) {
						this.iconinfo = '/static/image/redbag.png' //出现领红包图标
						this.winusertip = '现金红包' + this.winlottery.winuser.selfWin.money + "元"
						this.buttoninfo = '立即领取红包'
					}
					if (this.winlottery.winuser.selfWin.type == 4) {
						this.iconinfo = '/static/image/golds.png' //出现领红包图标
						this.winusertip = "恭喜您获得"+this.winlottery.winuser.selfWin.money+"金币"
						this.buttoninfo = '立即领取'
					}
					//用户触发后一键联系发起人
					if ( this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser.selfWin.grant == 'contact_me') {
						this.buttoninfo = '一键联系发起人';
						this.winlottery.winuser.selfWin.status = 1
						return;
					}
					
					//判断领取后的状态
					if (this.winlottery.winuser.selfWin.status > 1) {
						if (this.winlottery.winuser.selfWin.status == 2 && this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser
							.selfWin.grant == 'address') {
							this.buttoninfo = '查看收货地址';
						}else if (this.winlottery.winuser.selfWin.status == 3) {
							this.buttoninfo = '已过期';
						} else if (this.winlottery.winuser.selfWin.status == 4) {
							this.buttoninfo = '已评价';
						} else {
							this.buttoninfo = '已领取';
						}
					}
				}
				//是否出现晒得
				this.sheetinfo();
			},
			//按完成//领取物品
			tofinish() {
				console.log(this.winlottery.winuser.selfWin.status);
				//用户已填写好地址、需要点击再次进入查看收货地址
				if (this.winlottery.winuser.selfWin.status > 1 && this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser
					.selfWin.grant == 'address' && this.shippingid > 0) {
					uni.navigateTo({
						url: '/pages/member/selfaddr?id='+this.dreawid,
					})
					return;
				}

			

				//未领取的实物奖品，用户需要收货地址
				if (this.winlottery.winuser.selfWin.status == 1 && this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser
					.selfWin.grant == 'address') {
					uni.navigateTo({
						url: '/pages/member/address?id=' + this.dreawid,
					})
					return;
				}
			
				//未领取的实物奖品，需联系发起人领取
				if (this.winlottery.winuser.selfWin.status == 1 && this.winlottery.winuser.selfWin.type == 1 && this.winlottery.winuser
					.selfWin.grant == 'contact_me') { 
						if(this.winlottery.prizeimgarr[this.winlottery.winuser.selfWin.level].contactinfo.scan_code){
							uni.navigateTo({
								url: '/pages/release/downimg?imgresources=' + this.winlottery.prizeimgarr[this.winlottery.winuser.selfWin.level].contactinfo.qr_code,
							})
						}else{
							//console.log(this.winlottery.winuser.selfWin.status);
							//一键复制
							let _this=this;
							uni.setClipboardData({
							    data: this.winlottery.prizeimgarr[this.winlottery.winuser.selfWin.level].contactinfo.attention_text ,
							    success: function () {
									//console.log(_this.$common.state.isanimate);
									//_this.$common.state.isanimate = false;
							       // _this.$emit('opencopytip');
								   this.ishowanimate = false;
								   this.buttoninfo = '一键联系发起人';
							    }
							})
						}
					return;
				}
				//商品状态大于1或动画已停止代表已经领取奖品
				if (this.winlottery.winuser.selfWin.status > 1 || !this.ishowanimate) {
					return
				}
				//直接领取奖品
				this.$HttRequest({
					url: '/lottery/acceptPrize',
					param: {
						id: this.dreawid
					}
				},'POST',true).then((res) => {
					if (res.status === 10000) {
						//修改为已领奖状态
						this.winlottery.winuser.selfWin.status = 2;
						//修改提示内容
						this.changewininfo();
						//是否卡券
						if(this.winlottery.winuser.selfWin.type == 2){
							this.$ShowMsg('优惠券在【我的奖品】中查看使用！')
						}else{
							this.$ShowMsg('领取成功！');
						}
						
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>

<style lang="scss">
	.winnercontant {
		background-color: #fff;
		padding: 50rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.winelist {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			flex-direction: column;

			.winpirze-more {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 30rpx 0;
				color: #4393d6;
			}

			.winprize {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 85%;
				margin: 20rpx auto;
				font-size: 25rpx;

				.winprize-title {
					font-weight: bold;
					color: $uni-color-primary;
				}

				.winprize-people {
					display: flex;
					justify-content: space-around;
					align-items: center;
					flex-wrap: wrap;

					.people-item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						width: 180rpx;
						height: 180rpx;
						position: relative;

						//显示中奖金额
						.lotty-money {
							border-radius: 30rpx;
							border-bottom-left-radius: 0;
							padding: 10rpx;
							background-color: $uni-color-primary;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 18rpx;
							top: 20rpx;
							right: 5rpx;
							height: 20rpx;
							
							position: absolute;
						}

						image {
							margin: 10rpx;
							margin-top: 30rpx;
							border-radius: 50%;
							width: 80rpx;
							height: 80rpx;
						}

						.avatartext {
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 85%;
							font-size: 25rpx;
						}
					}

				}
			}

			.wine-title {
				width: 75%;
				margin: 0 auto;
				position: relative;
				color: #919191;
				height: 60rpx;

				.wine-line {
					width: 100%;
					height: 20rpx;
					border-bottom: 2rpx solid #d2d2d2;
				}

				.wine-text {
					width: 150rpx;
					height: 50rpx;
					position: absolute;
					background-color: #fff;
					top: 0;
					left: 160rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 25rpx;

				}

			}
		}

		.choice {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;

			.choice-title {
				color: #686868;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.choice-item {
				background-color: #f8f8f8;
				margin: 10rpx 0;
				width: 100%;
				height: 180rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 25rpx;
				color: #808080;

				image {
					margin: 10rpx 40rpx;
					width: 150rpx;
					height: 130rpx;
				}

				.choice-text {
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					.choice-item-title {
						width: 400rpx;
						color: #000;
						font-size: 26rpx;
						display: flex;

						.lenght {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 60%;
						}

						text {

							color: #808080;
						}
					}

					.canyuhuodong {
						border: 2rpx solid $uni-color-primary;
						color: $uni-color-primary;
						width: 145rpx;
						height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						background-color: #edf4fe;
					}
				}

			}
		}

		.winner-title {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			font-size: 32rpx;
			color: $uni-color-primary;
			margin: 0;
			font-weight: bold;

			.textinfo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;

				text {
					margin: 8rpx 0;
				}
			}
		}

		.receive:after {
			content: '';
			z-index: 33;
			position: absolute;
			border: 1rpx dashed #69a6fb;
			width: 96.5%;
			height: 280rpx;
			top: 8rpx;
			left: 10rpx;
		}

		.dryingsheet {
			flex: 1;
			padding: 10rpx;
			border: 1rpx solid #63a3fe;
			background-color: #edf4fe;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: $uni-botton-primary;
			font-size: 25rpx;
			margin-bottom: 20rpx;

			.dryinfo {
				display: flex;
				justify-content: center;
				align-items: center;

				.iconfont {
					margin: 0 5rpx;
					font-size: 22rpx;
				}
			}
		}



		.receivegold {
			margin: 40rpx 0;
			position: relative;
			width: 100%;
			height: 300rpx;
			background-color: #fece0a;
			z-index: 22;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 30rpx;
			color: #fff;
			font-weight: bold;
			border-radius: 8rpx;

			text {
				margin: 25rpx 0;
			}

			image {
				width: 65rpx;
				height: 65rpx;
			}

			.alreadyreceivegold-botton {
				width: 420rpx;
				height: 80rpx;
				background-color: rgba(#fff3e3, 0.5);
				color: #a68154;
				font-size: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
			}

			.receivegold-botton {
				width: 420rpx;
				height: 80rpx;
				background-color: #fff3e3;
				color: #a68154;
				font-size: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				animation: tiaodong .5s infinite;
				border-radius: 30rpx;
				// box-shadow: 0 0 10rpx #e6e6e6;
			}
		}

		.receivegold:after {
			content: '';
			z-index: 33;
			position: absolute;
			border: 1rpx dashed #f9e48a;
			width: 96.5%;
			height: 280rpx;
			top: 8rpx;
			left: 10rpx;
		}

		.receive {
			margin: 40rpx 0;
			position: relative;
			width: 100%;
			height: 300rpx;
			background-color: $uni-color-primary;
			z-index: 22;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 30rpx;
			color: #fff;
			font-weight: bold;
			border-radius: 8rpx;

			.iconfont {
				color: #fff;
			}

			text {
				margin: 25rpx 0;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.alreadyreceivegold-botton {
				width: 420rpx;
				height: 80rpx;
				background-color: rgba(#0a469b, 0.3);
				color: #c4dcfd;
				font-size: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
			}

			.receive-botton {
				width: 420rpx;
				height: 80rpx;
				background-color: #ebba40;
				color: #fff;
				font-size: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				animation: tiaodong .5s infinite;
				border-radius: 30rpx;
			}
		}

		@keyframes tiaodong {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}
		}

	}
</style>
